<template>
  <div class="box-card-div">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录</span>
        <!--      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      </div>
      <!--    <div v-for="o in 4" :key="o" class="text item">-->
      <!--      {{ '列表内容 ' + o }}-->
      <!--    </div>-->

      <table>
        <tr>
          <td>用户名:</td>
          <td>
            <el-input v-model="user.username" placeholder="请输入内容" clearable></el-input>
          </td>
        </tr>
        <tr>
          <td>密码:</td>
          <td>
            <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
          </td>
        </tr>
        <tr>
          <td>
          <el-button type="primary" v-on:click="doLogin" id="loginButton" >登录</el-button>

          </td>
        </tr>
      </table>
    </el-card>
  </div>


</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      user: {
        username: "zhangsan",
        password: "123"
      }
    }
  },
  methods: {
    doLogin() {
      alert(this.user.username);
      alert(this.user.password)
    }
  }

}
</script>

<style scoped>

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 380px;

}
 .box-card-div{
   display: flex;
   justify-content: center;
   /*align-content: center;*/
 }

 #loginButton{
   /*display: flex;*/
   /*justify-content: center;*/
   margin-left: 100px;
 }

</style>